<template>
  <div>
    <div class="mblog">
      <div style="margin-top: 20px"></div>

      <div>
        <el-container>
          <el-aside width="200px">
            <el-image :src="blog.picture" style="height: 130px"
          /></el-aside>
          <el-container>
            <el-header>
              <div>{{ blog.title }}</div>
              <div>时间:{{ blog.starttime }}</div>
              <div>地址:{{ blog.description }}</div>
            </el-header>
            <el-main>
              <el-divider></el-divider>
              <el-link icon="el-icon-edit" v-if="ownBlog" v-model="radio1">
                <router-link
                  :to="{ name: 'tckedit', params: { blogId: blog.id } }"
                >
                  编辑
                </router-link>
              </el-link>

              <div>
                场次:
                <el-radio-group
                  text-color="#F56C6C"
                  fill="#F56C6C"
                  v-model="radio1"
                  @change="setradio"
                  border
                >
                  <el-radio
                    border=""
                    v-for="item in ticks"
                    :key="item.id"
                    :label="item.id"
                    class="radiokai"
                    >{{ item.starttime }}
                  </el-radio>
                </el-radio-group>
              </div>
              <div>价格:{{ blog.price }}</div>
              <el-button
                style="border: 1px solid #f00"
                @click="dialogFormVisible = true"
                v-if="blog.nums > 0"
                icon="el-icon-shopping-cart-1"
                type="danger"
              >
                立即购买
              </el-button>
              <div v-if="blog.nums <= 0">已售空!</div>
              <el-button type="text" style="border: 1px" @click="tolove">
                <el-divider direction="vertical" />
                <i class="el-icon-star-off"></i>
                加入收藏
              </el-button>
              <router-link
                :to="{ name: 'retalk', params: { blogId: form.tickid } }"
                v-if="form.tickid"
                ><el-divider direction="vertical" />
                <i class="el-icon-chat-round"></i> 评论区
                <!--{{ form.tickid }}-->
              </router-link>
              <router-link
                :to="{ name: 'retalk', params: { blogId: blog.id } }"
                v-if="!form.tickid"
              >
                评论区 {{ blog.id }}
              </router-link>
              <!-- 
      <el-button type="text" style="float: right; border: 1px" @click="test"
        >买买买测试</el-button
      >
      
      <button style="float: right; border: 1px solid #f00" @click="myloveall">
        收藏列表测试
      </button>
      -->
            </el-main>
          </el-container>
        </el-container>
      </div>
      <el-divider></el-divider>
      <!--
      <div style="float: right">数量:{{ blog.nums }}</div>
      <br />
      <div style="float: right">价格:{{ blog.price }}</div>
      <h1>{{ blog.description }}</h1>
      -->
      <!-- <img src="/images/rl_top.35edfde.png" /> -->

      <el-carousel
        :interval="5000"
        arrow="always"
        height="1600px"
        width="1600px"
        autoplay="always"
        indicator-position="outside"
        ><!--type="card"-->
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <!-- {{ item }} 测试 -->
          <!-- <img style="height: 850px; width: 1600px" :src="item.idView" :fit="fit" ></img>-->
          <el-image
            :src="item.idView"
            :fit="fit"
            class="imgsize"
            style="width: 100%; height: 100%"
          ></el-image>
        </el-carousel-item>
      </el-carousel>

      <div class="content markdown-body" v-html="blog.contet"></div>
    </div>
    <!-- 模态框  包裹-->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-switch
        v-model="checked"
        @change="abc(checked)"
        inactive-text="使用收获信息"
      >
      </el-switch>
      预设地址:
      <el-select
        v-model="options"
        clearable
        placeholder="请选择"
        @change="choceadd"
      >
        <el-option
          v-for="item in myadd"
          :key="item.id"
          :label="item.realname"
          :value="item"
        >
        </el-option>
      </el-select>

      <div style="float: right">票务id:{{ form.tickid }}</div>
      <br />

      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.userReale" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.userPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.userAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证" :label-width="formLabelWidth">
          <el-input v-model="form.userIdcard" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible1"
          >确认购买</el-button
        >
      </div>
    </el-dialog>
    <!-- 模态框 -->
  </div>
</template>

<script>
import "github-markdown-css/github-markdown.css";
import Header from "../components/Header";
export default {
  name: "BlogDetail.vue",
  //import 引入的组件需要注入到对象中才能使用
  components: { Header },
  props: {},
  data() {
    //这里存放数据
    return {
      options: "",
      radio1: "",
      checked: false,
      myadd: [],
      imgList: [
        {
          id: 0,
          idView:
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        },
        {
          id: 1,
          idView:
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        },
        {
          id: 2,
          idView:
            "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        },
      ],
      blog: {
        id: "",
        description: "请重新进入",
        title: "信息错误请重新进入",
        contet: "内容错误请重新进入",
        nums: 0,
        price: 100,
        tickmessage: {},
        picture: "",
        userReale: "",
        userPhone: "",
        userAddress: "",
        userIdcard: "",
        type: 0,
        starttime: "2022-01-09T17:27:52",
        swiperb: "",
        swipera: "",
        tickid: 0,
      },

      ownBlog: false,

      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        tickId: 0,
        userReale: "",
        userPhone: "",
        userAddress: "",
        userIdcard: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",

      ticks: {},
      blog2: {
        id: "",
        description: "请重新进入",
        title: "信息错误请重新进入",
        contet: "内容错误请重新进入",
        nums: 0,
        price: 100,
        tickmessage: {},
        picture: "",
        userReale: "",
        userPhone: "",
        userAddress: "",
        userIdcard: "",
        type: 0,
        starttime: "2022-01-09T17:27:52",
        swiperb: "",
        swipera: "",
        tickid: 0,
      },
    };
  },

  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    test() {
      //购买
      if (this.blog.nums > 0) {
        const _this = this;
        console.log(
          "用户信息" + JSON.parse(sessionStorage.getItem("userInfo")).id
        );
        console.log("当前票务信息id" + this.radio1);

        if (!JSON.parse(sessionStorage.getItem("userInfo")).id) {
          console.log("kong");
          this.$notify({
            title: "请先登录!",
            message: "请登录后购买",
            duration: 1500,
          });
        } else {
          _this.$axios
            .get(
              `/tick/buy/${this.radio1}/${
                JSON.parse(sessionStorage.getItem("userInfo")).id
              }`
            )
            .then((res) => {
              console.log("res", res);
              this.$notify({
                title: "购买成功",
                message: "可在我的订单中查询",
                duration: 1500,
              });
            });
        }
      } else {
        this.$notify({
          title: "购买失败",
          message: "已无票源！",
          duration: 1500,
        });
      }
    },
    ischange() {
      console.log("切换");
    },
    setradio() {
      //变换商品类型
      console.log(this.radio1);
      const _this = this;
      this.$axios.get("/ticks/" + this.radio1).then((res) => {
        //这里修改发送的信息
        const blog = res.data.data;
        console.log("blog获取+++++++++++++++++++");
        console.log(blog);
        console.log("用户id获取");
        try {
          console.log(_this.$store.getters.getUser.id);
          if (blog.userId === _this.$store.getters.getUser.id) {
            _this.ownBlog = true;
            console.log(_this.ownBlog); //判断是否是管理员创的商品
          } else {
            _this.ownBlog = false;
          }
        } catch (err) {
          console.log("未登录");
          _this.ownBlog = false;
        }

        //_this.blog.id = blog.id;
        _this.blog.tickid = blog.id;
        _this.form.tickid = blog.id;
        _this.blog.title = blog.title;
        _this.blog.description = blog.description;
        _this.blog.contet = blog.contet;
        _this.blog.picture = blog.picture;
        _this.blog.price = blog.price;
        _this.blog.nums = blog.num;
        _this.blog.type = blog.type;
        if (blog.swiper) {
          _this.imgList[0].idView = blog.swiper;
        }
        if (blog.swipera) {
          _this.imgList[1].idView = blog.swipera;
        }
        if (blog.swiperb) {
          _this.imgList[2].idView = blog.swiperb;
        }

        console.log("picture****************************");
        console.log(_this.imgList[0].idView);
        var MarkdownIt = require("markdown-it");
        var md = new MarkdownIt();
        var result = md.render(blog.content);

        _this.blog.content = result;
        _this.ownBlog = blog.userId === _this.$store.getters.getUser.id;
      });
    },
    dialogFormVisible1() {
      //购买最终
      console.log("hellow", this.blog);
      this.form.tickId = this.radio1;
      const _this = this;
      this.$axios
        .post("/order/tick/buy", _this.form, {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log(res);
          _this.$alert("购买成功", "提示", {
            confirmButtonText: "确定",
            // callback: action => {
            //   _this.$router.push("/index")
            // }
          });
        });

      this.dialogFormVisible = false;
    },
    choceadd(res) {
      console.log("发生变化", res);
      console.log("当前form:", this.form);
      this.form.userAddress = res.address;
      this.form.userReale = res.realname;
      this.form.userPhone = res.phone;
      this.form.userIdcard = res.idcard;
    },
    abc(checked) {
      const _this = this;
      console.log("发生改变", checked);
      if (checked) {
        console.log("我是对的");
        _this.$axios
          .get(
            `/address/${
              JSON.parse(sessionStorage.getItem("userInfo")).id
            }/?currentpage=` + 1
          )
          .then((res) => {
            console.log("返回内容:", res);
            this.myadd = res.data.data.records;
            _this.myadd = res.data.data.records;
            console.log("我的myadd:", this.myadd);
          });
      } else {
        console.log("我是错的");
        (this.myadd = []), (this.options = "");
        this.form = {};
      }
    },
    tolove() {
      //收藏
      console.log("按下", this.radio1);
      const _this = this;
      this.$axios
        .get("/love/add/" + this.radio1, {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log(res);
          _this.$alert("收藏成功", "提示", {
            confirmButtonText: "确定",
          });
        });
    },
    myloveall() {
      console.log("触发");
      const _this = this;
      this.$axios
        .get("/love/mylove", {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log(res);
          _this.$alert("显示", "提示", {
            confirmButtonText: "确定",
          });
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    const blogId = this.$route.params.blogId;

    if (blogId) {
      console.log(blogId);
      const _this = this;

      this.$axios.get("/ticks/" + blogId).then((res) => {
        //这里修改发送的信息
        const blog = res.data.data;

        console.log("blog获取+++++++++++++++++++");
        console.log(blog);
        console.log("用户id获取");
        try {
          console.log(_this.$store.getters.getUser.id);
          if (blog.userId === _this.$store.getters.getUser.id) {
            //获取用户id导致卡顿
            _this.ownBlog = true;
            console.log(_this.ownBlog); //判断是否是管理员创的商品
          }
        } catch (err) {
          console.log("未登录");
        }

        _this.blog.id = blog.id;
        _this.blog.picture = blog.picture;
        _this.blog.title = blog.title;
        _this.form.tickid = blog.id;
        _this.form.tickId = blog.id;
        _this.blog.description = blog.description;
        _this.blog.nums = blog.num;
        _this.blog.price = blog.price;
        _this.blog.contet = blog.contet;
        _this.radio1 = blog.id;

        if (blog.swiper) {
          _this.imgList[0].idView = blog.swiper;
        }
        if (blog.swipera) {
          _this.imgList[1].idView = blog.swipera;
        }
        if (blog.swiperb) {
          _this.imgList[2].idView = blog.swiperb;
        }
        console.log("picture****************************");
        console.log(_this.imgList[0].idView);
        var MarkdownIt = require("markdown-it");
        var md = new MarkdownIt();
        var result = md.render(blog.content);

        _this.blog.content = result;
        _this.ownBlog = blog.userId === _this.$store.getters.getUser.id;
      });
      // this.$axios.get("/tick/" + blogId).then((res2) => {
      //   const tickmsg = res2.data.data.records[0];
      //   console.log("tickmsg****************************");
      //   console.log(tickmsg.tickNum);
      //   //_this.blog.nums = tickmsg.tickNum;
      //   //_this.blog.price = tickmsg.price;
      //   console.log(_this.blog.nums);
      // });

      console.log("生命周期 - 更新之前", this.blog.title);
      //现在的问题是我无法获取他的多日期
      //思路：controller 根据id获取后再进行一次集合查询名字然后返回一个集合前端进行接收后进行以数组的形式遍历按钮变更后再进行查询或者让blog=新集合[id]
      //新思路：获取id查询获取名字后再进行一次查询
      //this.$axios.get("/ticksByName?title="+this.blog.title).then(res => {
      this.$axios.get("/ticksByName/" + blogId).then((res) => {
        console.log("currentpagemessage:");
        console.log(res);
        _this.ticks = res.data.data.records;
      });
    } else {
      //后退时进行跳转
      this.$router.push("/home/index");
    }
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {},
};
</script>
<style scoped>
.radiokai {
  background: #ffffff;
  color: #303133;
  border-color: #f56c6c;
}
.imgsize {
  max-height: 100%;
  max-width: 100%;
}

.mblog {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  min-height: 700px;
  padding: 20px 15px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>